<template>
	<div class="my-wallet container-padding padding-top" page="my-wallet">
		<nav-header ></nav-header>
		<div class='recharge' catchtap="showRecharge">
			<div class='money-contain'>
				<span class='record-time'>余额</span>
				<span class='money'> 00000</span>
				<span class='unit'>元</span>
			</div>
			<div class='recharge-btn' @click="showRecharge">
				<span class='recharge-tip'>充值</span>
				<div class='icon-right-triangle'></div>
			</div>
		</div>

		<div class='record-list' v-if="expenseCalendar != null">
			<div class='record-header'>
				<span>消费记录</span>
			</div>
			<div class='record-body'>
				<div class='record-item' v-for="(item,index) in expenseCalendar">
					<div class='record-text'>
						<span class='record-title'>{{item.description}}</span>
						<span class='record-time'>{{item.create_time}}</span>
					</div>
					<span class='record-money'>{{item.add_or_minus}}{{item.operation_amount}}元</span>
				</div>
			</div>
		</div>
		<!--充值卡  -->
		<div v-if="isShowRecharge" class='modal' @click='hiddenRecharge'>
			<div class='recharge-container' @click.stop='stopPropagation'>
				<div class='panel-header'>
					<span class='panel-title'>输入充值码</span>
					<span class="icon-clear" @click='hiddenRecharge'></span>
				</div>
				<div class='panel-body'>
					<img src='../../../static/img/pay.png' class='icon-recharge' />
					<input type='number' placeholder='充值码' class='input-number' />
				</div>
				<div class='panel-foot' @click='confirmRecharge'>
					<span class='recharge-btn'>充值</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import {mapGetters,mapState,mapActions} from 'vuex';
	
	export default {
		name: 'HelloWorld',
		data() {
			return {
				isShowRecharge: false
			}
		},
		mounted() {
		},
		created(){
			this.getExpenseCalendar(101076);
		},
		computed:{
            ...mapState(['expenseCalendar'])
        },
		methods: {
			...mapActions(['getExpenseCalendar']),
			showRecharge(){
				this.isShowRecharge = !this.isShowRecharge
			},
			hiddenRecharge() {
				this.isShowRecharge = !this.isShowRecharge
			},
			stopPropagation() {

			},
			confirmRecharge() {

			}
		},
		components: {
			"nav-header": header,
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.my-wallet {
		width: 100%;
		overflow: hidden;
		margin: 90px 0 0;
		padding: 60px 40px 0;
		box-sizing: border-box;
		.recharge {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 48px;
			height: 174px;
			margin-bottom: 60px;
			background-color: #d7b378;
			border-radius: 16px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			.money-contain {
				display: flex;
				align-items: baseline;
				width: 100%;
				font-size: 30px;
				color: #fff;
				.money {
					font-size: 84px;
					color: #fff;
				}
				.unit {
					padding-left: 18px;
					font-size: 30px;
					color: #fff;
				}
			}
			.recharge-btn {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 110px;
				flex-shrink: 0;
				.recharge-tip {
					display: block;
					color: #fff;
					font-size: 30px;
					height: 100%；;
				}
				.icon-right-triangle {
					position: relative;
					width: 0;
					height: 0;
					border-left: 20px solid #fff;
					border-top: 12px solid transparent;
					border-bottom: 12px solid transparent;
					border-right-width: 0;
					margin-left: 26px;
				}
				.icon-right-triangle::after {
					position: absolute;
					left: -18px;
					top: -10px;
					width: 0;
					height: 0;
					border-left: 15px solid #d7b378;
					border-top: 10px solid transparent;
					border-bottom: 10px solid transparent;
					border-right-width: 0;
					content: "";
					z-index: 3000;
				}
			}
		}
		.record-list {
			.record-header {
				padding-bottom: 40px;
				font-size: 48px;
				color: #4a4a4a;
				letter-spacing: -0.56px;
				border-bottom: 1px solid #e5e5e5;
			}
			.record-body {
				.record-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 44px 0;
					border-bottom: 1px solid #e5e5e5;
					.record-text {
						position: relative;
						padding: 0 40px;
						width: 500px;
						.record-title {
							display: block;
							font-size: 30px;
							line-height: 42px;
							color: #4a4a4a;
							margin-bottom: 6px;
						}
						.record-time {
							display: block;
							font-size: 24px;
							color: #9b9b9b;
						}
					}
					.record-money {
						flex-shrink: 0;
						font-size: 40px;
						color: #4A4A4A;
					}
					.record-text::after {
						position: absolute;
						top: 10px;
						left: 0;
						width: 14px;
						height: 14px;
						border: 2px solid #4a4a4a;
						border-radius: 50%;
						content: "";
					}
				}
			}
		}
	}
	
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3000;
		.recharge-container {
			width: 540px;
			padding: 40px 60px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 40px 40px 0 rgba(0, 0, 0, 0.08);
			.panel-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 76px;
				.panel-title {
					font-size: 40px;
					color: #4A4A4A;
				}
				.icon-clear{
					width: 39px;
					height: 39px;
					display: inline-block;
					background-image: url(http://47.98.119.130/test/yami/delete@1x.svg);
				}
			}
			.panel-body {
				display: flex;
				align-items: center;
				padding-bottom: 26px;
				border-bottom: 1px solid #E5E5E5;
				margin-bottom: 60px;
				.icon-recharge {
					flex-shrink: 0;
					width: 40px;
					height: 40px;
					margin-right: 20px;
				}
				.input-number {
					font-size: 30px;
					color: #C4C4C4;
					border: none;
				}
			}
			.recharge-btn {
				display: block;
				width: 100%;
				height: 88rpx;
				background-color: #D7B378;
				line-height: 88rpx;
				font-size: 30rpx;
				color: #fff;
				text-align: center;
				box-shadow: 0 10rpx 10rpx 0 rgba(215, 179, 120, 0.10);
				border-radius: 8rpx;
			}
		}
	}
</style>